
/*============================================= #
#                                               #
# Copyright © 2023 JC`zic (Jean-Christophe Bos) #
#             jczic.bos@gmail.com               #
#                                               #
# =============================================*/

@font-face {
    font-family: 'Roboto';
    src: url('font/Roboto-Light.otf') format('opentype'),
         url('font/Roboto-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
  
@font-face {
    font-family: 'Roboto';
    src: url('font/Roboto-Regular.otf') format('opentype'),
         url('font/Roboto-Regular.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('font/Roboto-Medium.otf') format('opentype'),
         url('font/Roboto-Medium.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    font-family: Roboto;
    color: #505050;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 22px;
}

a:link, a:visited {
    color: #377c9e;
    cursor: pointer;
}

a:hover, a:focus, a:active {
    color: #A75269;
}

.img-vertical-middle {
    vertical-align: middle;
}

.hide {
    display: none;
}

.left {
    float: left;
}

.right {
    float: right;
}

.bold {
    font-weight: bold;
}

#menubar {
    position: absolute;
    height: 54px;
    left: 0;
    right: 0;
    padding: 0 15px;
    background-color: #54546c;
    color: white;
    border-bottom: 6px solid #436581;
    overflow: hidden;
}

#menubar-logo {
    float: left;
    width: 100px;
    height: 100px;
    margin-left: -25px;
    margin-top: -25px;
    background-color: #f3f5ff;
    border-radius: 50px;
    cursor: pointer;
}

@keyframes logo-anim-start {
    0%   { left: -50px; transform: rotate(-180deg); }
    100% { left:  20px; transform: rotate(0deg);    }
}

@keyframes logo-anim-next {
    0%   { transform: rotate(359deg); }
    5%   { transform: rotate(0deg);   }
    7%   { transform: rotate(359deg); }
    100% { transform: rotate(359deg); }
}

#logo {
    position: absolute;
    left: 20px;
    top: 5px;
    width: 44px;
    height: 44px;
    background-size: 44px 44px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('img/logo-128.png');
    animation: logo-anim-start 1.5s ease     0s  1        normal,
               logo-anim-next  20s  ease-out 20s infinite normal;
}

#menubar-title {
    float: left;
    margin-left: 23px;
    line-height: 55px;
    font-size: 22px;
    font-weight: normal;
    letter-spacing: 3px;
    text-shadow: 1px 1px 10px #101010;
}

#device-info {
    display: none;
    float: right;
    margin-top: 16px;
    margin-right: 13px;
    font-size: 11px;
    line-height: 13px;
    color: #e9f4fb;
    letter-spacing: 2px;
    text-shadow: 1px 1px 5px #101010;
}

#device-mcu {
    float: right;
    font-weight: 600;
}

#device-module {
    float: right;
}

@keyframes btn-connection-anim {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(0deg); }
    12%  { transform: rotate(3deg); }
    14%  { transform: rotate(-3deg); }
    16%  { transform: rotate(3deg); }
    18%  { transform: rotate(-3deg); }
    20%  { transform: rotate(3deg); }
    22%  { transform: rotate(-3deg); }
    24%  { transform: rotate(3deg); }
    26%  { transform: rotate(-3deg); }
    28%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

#btn-connection {
    float: right;
    width: 157px;
    margin-top: 13px;
    border: 1px solid white;
    padding-left: 15px;
    text-align: center;
    line-height: 19px;
    font-size: 12px;
    text-shadow: 0px 0px 1px gray;
    background-size: 24px 24px;
    background-position-x: 2px;
    background-position-y: 2px;
    background-repeat: no-repeat;
    background-image: url('img/btn-connect.png');
    animation: btn-connection-anim 7s ease 2.5s 1 normal;
}

#menu-panel-container {
    position: absolute;
    width: 174px;
    top: 60px;
    bottom: 30px;
    border-right: 6px solid #436581;
    background-color: #377c9e;
    overflow: hidden;
}

#switch-bar {
    position: absolute;
    width: 100%;
    height: 22px;
}

input[type=button].switch-button {
    position: absolute;
    height: 100%;
    width: 50%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    font-size: 10px;
    line-height: 22px;
    color: #e9f4fb;
    background-color: #436581;
} input[type=button].switch-button:hover { color: white; }

input[type=button].switch-button-selected {
    color: white;
    background-color: #377c9e;
} input[type=button].switch-button-selected:hover {
    background-color: #377c9e;
    cursor: inherit;
}

#switch-btn-menu {
    left: 0;
    text-shadow: 1px 1px 5px #333333;
}

#switch-btn-browse {
    right: 0;
    text-shadow: 1px 1px 5px #333333;
}

.menu-panel {
    position: absolute;
    top: 30px;
    width: 100%;
    bottom: 108px;
    overflow: hidden;
}

input[type=button].menu-button {
    height: 40px;
    margin: 0;
    text-align: left;
    padding-left: 45px;
    line-height: 32px;
    border-radius: 0;
    background-size: 28px 28px;
    background-position-x: 8px;
    background-position-y: 6px;
    background-repeat: no-repeat;
    text-shadow: 0px 0px 1px #505050;
} input[type=button].menu-button:hover {
    background-color: #436581;
    transform: scale(1.05);
    transition: transform 130ms ease-out;
}

#menu-panel-btns {
    overflow-x: hidden;
    overflow-y: auto;   
}

#browse-current-dir {
    position: absolute;
    top: 0;
    left: 6px;
    right: 6px;
    height: 16px;
    background-color: #e9f4fb;
    color: DarkSlateGray;
    line-height: 16px;
    font-size: 10px;
    text-align: center;
    word-break: break-all;
    overflow: hidden;
}

#browse-list-files {
    position: absolute;
    top: 20px;
    width: 100%;
    bottom: 103px;
    overflow-x: hidden;
    overflow-y: auto;
}

.list-files {
    width: 100%;
    height: 26px;
    line-height: 26px;
    color: #e9f4fb;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
} .list-files:hover {
    background-color: #436581;
    transform: scale(1.05);
    transition: transform 130ms ease-out;
}

#list-files-selected {
    height: 32px;
    padding-top: 3px;
    background-color: #A75269;
    line-height: 14px;
    color: white;
    transition: height 350ms ease,
                padding-top 350ms ease,
                background-color 350ms ease,
                line-height 350ms ease;
}

.list-files-picto {
    float: left;
    width: 18px;
    height: 18px;
    margin: 4px;
    margin-left: 6px;
    background-size: 18px 18px;
    background-repeat: no-repeat;
}

.list-files-text {
    position: absolute;
    height: 26px;
    left: 29px;
    right: 0;
    font-size: 10px;
    word-break: break-all;
    text-shadow: 0px 0px 1px #505050;
    overflow: hidden;
}

.list-files-picto-dir         { background-image: url('img/folder.png'); }
.list-files-picto-file        { background-image: url('img/file.png'); }
.list-files-picto-file-python { background-image: url('img/file-python.png'); }
.list-files-picto-sdcard      { background-image: url('img/sdcard.png'); }

#panel-browse-buttons {
    position: absolute;
    height: 105px;
    width: 100%;
    bottom: 0;
}

input[type=button].browse-button {
    float: left;
    width: 47%;
    height: 18px;
    margin: 6px 0 0 2%;
    padding: 0;
    border: 1px solid silver;
    color: silver;
    font-size: 9px;
    line-height: 16px;
    cursor: inherit;
} input[type=button].browse-button:hover { background-color: #377c9e; }

input[type=button].browse-button-large {
    width: 96%;
}

input[type=button].browse-button-actif {
    border-color: white;
    color: white;
    cursor: pointer;
} input[type=button].browse-button-actif:hover { background-color: #A75269; }

#menu-panel-connection {
    position: absolute;
    width: 100%;
    height: 108px;
    bottom: 0;
    border-top: 3px solid #436581;
    text-align: center;
    background-color: #2b3e50;
}

#label-connection {
    position: relative;
    height: 16px;
    margin: 10px;
    margin-bottom: 0;
    text-align: center;
    font: 8px monospace;
    line-height: 18px;
    letter-spacing: 1px;
    border: 6px solid #436581;
    border-top: 0;
    border-bottom: 0;
}

@keyframes img-processing-anim {
    0%   { transform: translateX(-37px); }
    50%  { transform: translateX(37px); }
    100% { transform: translateX(-37px); }
}

#img-processing {
    width: 75px;
    height: 75px;
    margin-top: 3px;
    animation: img-processing-anim 1.5s ease-in-out 0s infinite normal;
}

#panel-connection {
    position: relative;
    left: 0;
    right: 0;
    margin-top: 10px;
    padding: 0 7px;
}

#main-container {
    position: absolute;
    top: 60px;
    bottom: 30px;
    left: 180px; 
    right: 0;
}

@keyframes logo-esp-anim {
    0%   { opacity: 0; }
    15%  { opacity: 0; }
    100% { opacity: 0.75; }
}

#logo-esp {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 350px 350px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('img/esp.png');
    opacity: 0.75;
    animation: logo-esp-anim 5s ease 0s 1 normal;
}

@keyframes hand-click-anim {
    0%   { top: 20px; right: 250px; opacity: 0.00; transform: rotate(-25deg); }
    13%  { top: 3px;  right: 185px; opacity: 0.70; transform: rotate(0deg); }
    35%  { top: 3px;  right: 185px; opacity: 0.70; }
    50%  { top: 3px;  right: 185px; opacity: 0.00; }
    100% { top: 20px; right: 250px; opacity: 0.00; }
}

#hand-click {
    position: absolute;
    top: 20px;
    right: 250px;
    width: 100px;
    height: 95px;
    background-size: 100px 95px;
    background-repeat: no-repeat;
    background-image: url('img/hand-click.png');
    opacity: 0.00;
    animation: hand-click-anim 7s ease-in-out 2.5s 1 normal;
}

#label-ver-on-os {
    position: absolute;
    right: 5px;
    bottom: 0;
    color: #2b3e50;
    font-size: 10px;
    font-weight: 600;
}

.page-container {
    display: none;
    position: relative;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: white;
    background-size: 113% auto;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('img/logo-fili.png');
}

.page {
    padding: 15px;
}

.page-logo {
    width: 48px;
    height: 48px;
    margin-bottom: 25px;
    border-radius: 10px;
    background-color: #54546c;
    background-size: 32px 32px;
    background-position-x: 8px;
    background-position-y: 8px;
    background-repeat: no-repeat;
}

.page-title {
    position: absolute;
    top: 26px;
    left: 75px;
    width: max-content;
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 28px;
    color: #54546c;
    text-shadow: 1px 1px 3px #E0E0E0;
}

@keyframes toast-info-anim {
    0%   { transform: translateX(100%); }
    10%  { transform: translateX(0%); }
    90%  { transform: translateX(0%); }
    100% { transform: translateX(-150%); }
}

.toast-info {
    position: absolute;
    z-index: 999;
    left: 230px;
    right: 50px;
    bottom: 50px;
    padding: 5px;
    border: 2px solid #377c9e;
    border-radius: 15px;
    background-color: #449292;
    opacity: 0.85;
    color: white;
    text-align: center;
    font-weight: 600;
    letter-spacing: 2px;
    overflow: hidden;
    animation: toast-info-anim  5s ease-in-out 0s 1 normal;
}

#footer {
    position: absolute;
    height: 30px;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 10px;
    background-color: #54546c;
    color: White;
    text-align: center;
    font-size: 10px;
    line-height: 32px;
    letter-spacing: 2px;
}

#JCzic {
    cursor: pointer;
}

#protect-layer {
    position: fixed;
    z-index: 99;
    top: 0;
    bottom: 30px;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.50;
}

.info-tag-success {
    padding: 2px 6px;
    border-radius: 10px;
    background-color: #449292;
    color: snow;
}

.info-tag-error {
    padding: 2px 6px;
    border-radius: 10px;
    background-color: #a85f72;
    color: snow;
}

.center-container {
    position: relative;
    /* display: flex; */
    min-height: 100vh;
}

.center-container-show {
    display: flex;
}

.box-dialog-window {
    position: relative;
    margin: auto;
    padding-bottom: 20px;
    z-index: 100;
    border: 5px solid #377c9e;
    border-radius: 5px;
    text-align: center;
    line-height: 10px;
    background-color: white;
    overflow: hidden;
}

@keyframes box-dialog-anim-kf {
    0%   { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.box-dialog-anim {
    animation: box-dialog-anim-kf  150ms ease-out 0s 1 normal;
}

.box-dialog-title {
    padding: 10px;
    padding-top: 5px;
    font-size: 15px;
    font-weight: bold;
    line-height: 15px;
    color: white;
    letter-spacing: 2px;
    border-bottom: 1px solid darkgray;
    background-color: #377c9e;
}

.box-dialog-title-text {
    font-weight: bold;
}

.box-dialog-text {
    margin: 20px;
    font-size: 12px;
    line-height: 18px;
}

.box-dialog-btn-panel {
    width: 350px;
    margin-left: auto;
    margin-right: auto;
}

.box-dialog-btn {
    width: 40%;
    height: 30px;
}

.box-dialog-input {
    width: 90%;
    margin-bottom: 20px;
}

.box-dialog-object {
    position: relative;
    margin: 20px auto;
    padding: 0 25px;
    font-size: 12px;
    line-height: 12px;
}

#box-dialog-list-items {
    position: relative;
    width: 500px;
    height: 190px;
    margin: 0 30px 20px 30px;
    border: 1px solid DarkGray;
    border-radius: 3px;
    background-color: WhiteSmoke;
    overflow-x: hidden;
    overflow-y: auto;
}

.list-item {
    position: relative;
    height: 32px;
    border-bottom: 1px solid Silver;
    background-color: #e9f4fb;
    overflow: hidden;
    cursor: pointer;
} .list-item:hover {
    color: white;
    background-color: #449292;
    transition: background-color 200ms ease-out, color 100ms ease-out;
}

.list-item-picto {
    position: relative;
    width: 24px;
    height: 24px;
    margin: 4px 6px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
}

.list-item-text {
    position: absolute;
    height: 100%;
    left: 35px;
    right: 35px;
    text-align: left;
    line-height: 32px;
    word-break: break-all;
    overflow: hidden;
}

.prop-item {
    height: 22px;
}

.prop-item-picto {
    clear: both;
    position: relative;
    float: left;
    width: 16px;
    height: 16px;
    margin: 3px 0;
    background-position: center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
}

.prop-item-picto-btn {
    clear: none;
    float: right;
    cursor: pointer;
} .prop-item-picto-btn:hover {
    transform: scale(1.3);
    transition: transform 130ms ease-out;
}

.prop-item-text {
    position: relative;
    float: left;
    height: 22px;
    text-align: left;
    line-height: 22px;
    word-break: break-all;
    overflow: hidden;
}

.list-item-picto-search         { background-image: url('img/search.png'); }
.list-item-picto-usb            { background-image: url('img/usb.png'); }
.list-item-picto-serial         { background-image: url('img/serial.png'); }
.list-item-picto-wifi-open      { background-image: url('img/wifi-open.png'); }
.list-item-picto-wifi-secure    { background-image: url('img/wifi-secure.png'); }
.list-item-picto-wifi-sig1      { background-image: url('img/wifi-sig1.png'); }
.list-item-picto-wifi-sig2      { background-image: url('img/wifi-sig2.png'); }
.list-item-picto-wifi-sig3      { background-image: url('img/wifi-sig3.png'); }
.list-item-picto-wifi-sig4      { background-image: url('img/wifi-sig4.png'); }
.list-item-picto-wifi-sig5      { background-image: url('img/wifi-sig5.png'); }
.list-item-picto-wifi-sig6      { background-image: url('img/wifi-sig6.png'); }
.list-item-picto-exec-func      { background-image: url('img/exec-func.png'); }
.list-item-picto-python         { background-image: url('img/python.png'); }
.list-item-picto-freq           { background-image: url('img/freq.png'); }
.list-item-picto-pins           { background-image: url('img/pins.png'); }
.list-item-picto-pin-high       { background-image: url('img/pin-high.png'); }
.list-item-picto-pin-low        { background-image: url('img/pin-low.png'); }
.list-item-picto-remove         { background-image: url('img/remove.png'); }

input, select {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 0 6px;
    border: 2px solid #436581;
    line-height: 20px;
    text-align: left;
    background-color: #e9f4fb;
    color: #2b3e50;
    letter-spacing: 1px;
}

input[type=button], input[type=submit] {
    height: 30px;
    margin: 2px;
    padding: 5px;
    border: none;
    background-color: #377c9e;
    font-family: Roboto;
    font-size: 12px;
    text-align: center;
    color: White;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
} input[type=button]:hover, input[type=submit]:hover {
    background-color: #449292;
    transform: scale(1.025);
    transition: transform 80ms ease-out;
}

input[type=button].button-little-text {
    width: auto;
    height: 20px;
    margin: 0;
    padding: 2px 7px;
    border: none;
    border-radius: 2px;
    font-size: 9px;
    line-height: 9px;
} input[type=button].button-little-text:hover {
    background-color: #449292;
}

input[type=button]:disabled, input[type=submit]:disabled {
    color: WhiteSmoke;
    background-color: Silver;
    cursor: inherit;
} input[type=button]:disabled:hover, input[type=submit]:disabled:hover {
    background-color: Silver;
}

select {
    height: 30px;
}

.progress-outer {
    position: relative;
    margin: 10px;
    margin-bottom: 0;
    min-width: 400px;
    height: 25px;
    border: 2px solid #436581;
    background-color: #54546c;
    border-radius: 3px;
    overflow: hidden;
}

.progress-inner {
    width: 0;
    height: 100%;
    background-color: #449292;
}

.progress-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    color: white;
    line-height: 25px;
}

.progress-little-outer {
    position: relative;
    margin: 5px 0;
    height: 14px;
    border: 1px solid #D0D0D0;
    background-color: #436581;
    border-radius: 3px;
    overflow: hidden;
}

.progress-little-inner {
    width: 0;
    height: 100%;
    background-color: #a85f72;
}

.progress-little-text {
    position: absolute;
    left: 3px;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: left;
    color: whitesmoke;
    font: 7px monospace;
    line-height: 16px;
    letter-spacing: 1px;
}

.elm-config-box-text {
    margin-bottom: 5px;
    text-align: left;
}

.elm-config-box-input {
    margin-bottom: 20px;
    text-align: left;
}

.code {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid LightGrey;
    color: DimGray;
    background-color: WhiteSmoke;
}

.properties-container {
    float: left;
    width: 38%;
    min-width: 280px;
    margin-left: 8%;
    margin-bottom: 35px;
}

.properties-container-large {
    float: left;
    width: 84%;
    min-width: 500px;
    margin-left: 8%;
    margin-bottom: 35px;
}

.properties-title {
    position: relative;
    width: 100%;
    margin-bottom: 5px;
    padding-top: 3px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 26px;
    color: white;
    background-color: #687b95;
    border-bottom: 3px solid #54546c;
    white-space: nowrap;
    letter-spacing: 2px;
    overflow: hidden;
}

@keyframes keepcnf-btn-anim {
    0%   { background-color: #00b6b6; }
    100% { background-color: transparent; }
}

input[type=button].properties-keepcnf-btn {
    display: none;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    background-size: 22px 22px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('img/btn-upload.png');
    border: 1px solid white;
    border-radius: 6px;
    animation: keepcnf-btn-anim 0.5s ease-in-out 0s infinite alternate;
} input[type=button].properties-keepcnf-btn:hover {
    transform: rotate(90deg);
    transition: transform 100ms ease-out;
}

.properties-left {
    width: 40%;
    float: left;
    font: 11px monospace;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
}

.properties-right {
    width: 60%;
    font: 11px monospace;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
}

.properties-container-mini {
    width: 60%;
    margin-left: 20%;
    margin-bottom: 15px;
}

.label-version {
    color: #377c9e;
    font-weight: bold;
}

#sysnfo-partitions {
    text-align: left;
    width: 100%;
    font: 11px monospace;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
}

#ide-code {
    position: absolute;
    top: 0;
    bottom: 170px;
    width: 100%;
    overflow: hidden;
}

#code-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 36px;
    padding: 2px;
    background-color: #19242F;
}

#tabs-code-bar {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    height: 24px;
    border-top: 3px solid #436581;
    border-left: 1px solid #2b3e50;
}

#tabs-code-container-scroll {
    position: absolute;
    height: 100%;
    overflow: hidden;
    background-color: #436581;
}

.tabs-code-container-scroll-hide-btns {
    left: 0;
    right: 0;
}

.tabs-code-container-scroll-show-btns {
    left: 18px;
    right: 18px;
} 

.tabs-code-container-scroll-btn {
    position: absolute;
    width: 14px;
    height: 100%;
    padding: 2px 3px;
    color: white;
    background-color: #19242F;
    cursor: pointer;
} .tabs-code-container-scroll-btn:hover { background-color: #377c9e; }

#tabs-code-container-scroll-btn-left {
    left: 0;
}

#tabs-code-container-scroll-btn-right{
    right: -3px;
    padding-left: 4px;
}

#tabs-code-container {
    position: absolute;
    min-width: 100%;
    height: 100%;
    width: max-content;
}

.tab-code {
    float: left;
    height: 100%;
    width: fit-content;
    margin: 0;
    padding-left: 17px;
    border-right: 1px solid #2b3e50;
    text-align: left;
    line-height: 24px;
    background-color: #436581;
    cursor: pointer;
} .tab-code:hover { color: white; background-color: #377c9e; }

#tab-code-selected {
    color: white;
    background-color: #2b3e50;
} #tab-code-selected:hover {
    background-color: #2b3e50;
    cursor: inherit;
}

.tab-code-text {
    float: left;
    font-size: 10px;
    color: #e9f4fb;
}

.tab-code-close {
    float: left;
    margin-top: 2px;
    padding-left: 6px;
    padding-right: 4px;
    text-align: left;
    font-size: 12px;
    color: #436581;
    cursor: pointer;
} .tab-code-close:hover {
    color: FireBrick;
    font-weight: bold;
}

#code-editors {
    position: absolute;
    top: 67px;
    bottom: 0;
    width: 100%;
    border-bottom: 2px solid #436581;
}

.code-editor {
    position: relative;
    width: 100%;
    height: 100%;
}

#terminal-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #19242F;
}

.terminal-container-mini {
    height: 170px;
}

.terminal-container-maxi {
    height: 100%;
}

.terminal {
    padding: 6px;
    background-color: #19242F;
    font: 10px monospace;
    text-align: left;
    color: White;
    line-height: 14px;
    letter-spacing: 1px;
}

#terminal-repl {
    padding-bottom: 0;
}

.terminal-LightSkyBlue {
    color :LightSkyBlue !important;
}

.terminal-LightSteelBlue {
    color: LightSteelBlue !important;
}

.terminal-SeaGreen {
    color: SeaGreen !important;
}

.terminal-IndianRed {
    color: IndianRed !important;
}

#terminal-bar {
    position: relative;
    padding: 10px;
    padding-top: 0;
}

#terminal-enter-cmd {
    position: absolute;
    top: -4px;
    height: 14px;
    background-color: #19242F;
    font: 10px monospace;
    line-height: 14px;
    color: LightSteelBlue;
    letter-spacing: 1px;
}

#terminal-input-cmd {
    display: block;
    position: absolute;
    width: auto;
    top: -4px;
    left: 116px;
    right: 0;
    height: 14px;
    outline: none;
    border: none;
    text-align: left;
    background-color: #19242F;
    font: 10px monospace;
    line-height: 14px;
    color: white;
    letter-spacing: 1px;
}

#terminal-input-cmd:hover,
#terminal-input-cmd:focus,
#terminal-input-cmd:active {
    outline: none;
}

#list-jama-funcs-items {
    margin: 15px 0;
}

.list-jama-funcs-item {
    clear: both;
    padding: 18px 7px 0 7px;
    line-height: 18px;
    text-align: justify;
    border-top: 1px solid DarkGray;
}

.list-jama-funcs-item-picto {
    float: left;
    width: 24px;
    height: 24px;
    background-color: #377c9e;
    border-radius: 6px;
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('img/btn-exec.png');
}

.list-jama-funcs-item-name {
    float: left;
    margin-left: 8px;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 26px;
}

.list-jama-funcs-item-version {
    float: right;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 26px;
}

.list-jama-funcs-item-description {
    clear: both;
    margin: 5px 0;
    line-height: 16px;
}

.list-jama-funcs-item-left {
    float: left;
    margin-bottom: 18px;
    font-size: 10px;
    line-height: 14px;
}

.list-jama-funcs-item-right {
    float: right;
    padding-top: 26px;
    font-size: 10px;
    line-height: 14px;
}

#exec-jama-funcs-title {
    margin-bottom: 13px;    
}

#exec-jama-funcs-description {
    text-align: justify;
}

#exec-jama-funcs-author {
    margin: 10px 50px 10px 0;
    font-size: 11px;
    letter-spacing: 3px;
    color: #377c9e;
}

#exec-jama-funcs-args-title {
    background-color: #687b95;
}

.exec-jama-funcs-input {
    margin-top: 2px;
    margin-bottom: 18px;
    text-align: left;
}

.exec-jama-funcs-bool {
    clear: both;
    width: 48px;
    height: 24px;
    margin-left: auto;
    margin-right: auto;
    background-size: 48px 24px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.exec-jama-funcs-bool-off {
    background-image: url('img/switch-off.png');
}

.exec-jama-funcs-bool-on {
    background-image: url('img/switch-on.png');
}

#elm-jama-func-terminal-container {
    width: 550px;
    height: 300px;
    border: 3px solid #436581;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #19242F;
}

#jama-func-stop-btn {
    position: absolute;
    right: 38px;
    bottom: 13px;
    background-image: url('img/btn-stop.png');
}

input[type=button].tiny-btn {
    position: relative;
    float: left;
    width: 32px;
    height: 32px;
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #2B3E50;
} input[type=button].tiny-btn:hover { background-color: #449292; }

input[type=button].tiny-btn-right {
    float: right;
}

.tiny-btn-separator {
    position: relative;
    float: left;
    width: 22px;
    height: 32px;
}

.tiny-btn-separator-right {
    position: relative;
    float: right;
    width: 22px;
    height: 32px;
}

#exec-code-stop-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background-image: url('img/btn-stop.png');
}

#sysnfo-pins-left {
    width: 50%;
}

#sysnfo-pins-right {
    width: 50%;
}

#elm-pinout-info {
    width: 900px;
    height: 530px;
    background-size: 900px 530px;
    background-repeat: no-repeat;
}

#elm-list-pinout-info {
    position: absolute;
    width: auto;
    height: 22px;
    right: 25px;
    bottom: -47px;
    font-size: 10px;
    line-height: 10px;
}

#menu-btn-ide              { background-image: url('img/menu-ide.png'); }
#menu-btn-jama-funcs       { background-image: url('img/menu-jama-funcs.png'); }
#menu-btn-terminal         { background-image: url('img/menu-terminal.png'); }
#menu-btn-sys-info         { background-image: url('img/menu-sys-info.png'); }
#menu-btn-net-info         { background-image: url('img/menu-nt-info.png'); }
#menu-btn-wifi-sta         { background-image: url('img/menu-wifi-sta.png'); }
#menu-btn-wifi-ap          { background-image: url('img/menu-wifi-ap.png'); }
#menu-btn-sdcard           { background-image: url('img/menu-sdcard.png'); }
#menu-btn-reset            { background-image: url('img/menu-reset.png'); }
#menu-btn-firmware         { background-image: url('img/menu-firmware-tools.png'); }
#menu-btn-soft-info        { background-image: url('img/menu-soft-info.png'); }

#page-logo-jama-funcs      { background-image: url('img/menu-jama-funcs.png'); }
#page-logo-sys-info        { background-image: url('img/menu-sys-info.png'); }
#page-logo-networks-info   { background-image: url('img/menu-nt-info.png'); }
#page-logo-sdcard          { background-image: url('img/menu-sdcard.png'); }
#page-logo-esptool         { background-image: url('img/menu-firmware-tools.png'); }
#page-logo-no-esptool      { background-image: url('img/exclamation.png'); }
#page-logo-soft-info       { background-image: url('img/menu-soft-info.png'); }

#new-tiny-btn              { background-image: url('img/btn-new.png?v2'); }
#save-tiny-btn             { background-image: url('img/btn-save.png?v2'); }
#exec-tiny-btn             { background-image: url('img/btn-exec.png'); }
#stop-tiny-btn             { background-image: url('img/btn-stop.png'); }
#undo-tiny-btn             { background-image: url('img/btn-undo.png'); }
#redo-tiny-btn             { background-image: url('img/btn-redo.png'); }
#search-tiny-btn           { background-image: url('img/btn-search.png'); }
#modules-tiny-btn          { background-image: url('img/btn-modules.png'); }
#packages-tiny-btn         { background-image: url('img/btn-packages.png'); }
#gpio-tiny-btn             { background-image: url('img/btn-gpio.png?v3'); }

input[type=button].tiny-btn-green       { background-color: SeaGreen; }
input[type=button].tiny-btn-green:hover { background-color: MediumSeaGreen; }
input[type=button].tiny-btn-red         { background-color: FireBrick; }
input[type=button].tiny-btn-red:hover   { background-color: Crimson; }
